<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="title">
        用户登陆
      </div>
      <!-- 登录表单区域 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
        label-width="0px"
        class="login_form"
      >
        <!--        用户名-->
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <!--        密码-->
        <el-form-item prop="password">
          <el-input
            show-password
            v-model="loginForm.password"
            prefix-icon="el-icon-key"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <!--        按钮区域-->
        <el-form-item class="btns">
          <el-button
            type="primary"
            @click.native.prevent="Login()"
            @keyup.native.enter="Login()"
            >登录</el-button
          >
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <el-cascader style="width:260px" placeholder="请选择部门(可搜索)" :show-all-levels="false" :options="newlist" :props="defaultProps2"></el-cascader> -->
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      newlist: [],
      defaultProps2: {
        children: "depts",
        label: "name",
        value: "id",
      },
      // 数据绑定对象
      loginForm: {
        username: "",
        password: "",
        ip: "",
        mac: "",
      },
      operates: [],
      resources: [],
      // 验证规则对象
      loginFormRules: {
        //验证用户
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    //获取ip地址
    ready() {
      return returnCitySN["cip"];
    },
    Login() {
      sessionStorage.clear();
      // 预验证
      this.$refs.loginFormRef.validate(async (valid) => {
        //未验证通过则直接return
        if (!valid) {
          this.$c.msg("请输入用户或密码");
          return;
        }
        //不加await的化不会打印出数据，await只能用于async修饰的函数
        // console.log(qs.stringify(this.loginForm))
        // const response = await this.$http
        //   .post("usercenter/api/checkuser", null, { params: this.loginForm })
        //
        // // {data:res}解构，将得到的返回值的data解构为res
        const response = await this.$http
          .request({
            url: "usercenter/api/checkuser",
            method: "post",
            params: this.loginForm,
          })
          .catch(() => this.$message.error("登录失败,请重新输入"));
        console.log(response);
        if (response.data.message == "用户名或密码错误！") {
          this.$c.msg("用户或密码错误!");
        } else if (response.data.message == "该用户已被禁用！") {
          this.$c.msg("该用户已被禁用！");
        } else {
          console.log(response.data.message);
          if (response.data.code !== "500") {
            // 登出成功后获取token以及用户信息
            sessionStorage.setItem("token", response.data.token);
            // sessionStorage.setItem("userid", response.data.userinfo.userid);
            // sessionStorage.setItem("username", response.data.userinfo.username);
            // sessionStorage.setItem("clientIp", this.ready());
            // sessionStorage.setItem(
            //   "operates",
            //   JSON.stringify(response.data.operates)
            // );
            // sessionStorage.setItem(
            //   "resources",
            //   JSON.stringify(response.data.resources)
            // );
            if (response.data.router != "") {
              window.location.href = response.data.router;
            } else {
              this.$router.push("/allrouter/index");
            }
          } else {
            this.$c.msg("服务器异常!");
          }
        }
        // console.log(res.meta.statusText)
        //从res的元数据中得到返回状态
        // if (response.message == "用户名、密码正确！") {
        //   console.log('res')
        // }
        // if (response.data.error) return this.$message.error(response.data.error)
      });
    },
    //重置登录表单
    resetLoginForm() {
      // console.log(this)
      // ui框架自带的form表单方法
      this.$refs.loginFormRef.resetFields();
    },
  },
  created() {
    // 回车登陆
    document.onkeyup = (e) => {
      // console.log(e)
      if (e.key === "Enter" && e.target.baseURI.match(/login/)) {
        this.Login(); //调用登录 验证方法
      }
    };
    // this.getdescr()
  },
};
</script>
<!--加上scoped是将样式应用于此组件，不加是全局-->
<style lang="scss" scoped>
.login_box {
  width: 430px;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  /*容器内居中*/
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    /*边框阴影*/
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
  .title {
    padding-top: 40px;
    color: #ffffff;
    font-size: 30px;
  }

  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .btns {
    display: flex;
    justify-content: center;
  }
}
.bg01 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
</style>
